<template>
    <div>
        <div class="c-title-5 ">
            <div class="r-table r-header ">
                <div class="r-coll c-type">
                    <span class="t-mr t-ml">
                        <!-- # -->
                        {{ $t('message.Volatility.a') }}
                    </span>
                    <Sort :sort="HotSort[0]" :call-fun="sortc.onDown.bind(sortc)"></Sort><span class="t-ml ml-7">
                        <!-- 币种 -->
                        {{ $t('message.Volatility.b') }}
                    </span>
                </div>
                <div class="r-coll c-news">
                    <!-- 最新价 -->
                    {{ $t('message.Volatility.c') }}
                </div>
                <div class="r-coll c-wave">
                    <span class="t-mr">
                        <!-- 漲跌幅 -->
                        <!-- {{ volatility.nvas_.value.value }} -->
                        {{ $t('message.Volatility.d') }}
                    </span>
                    <Sort :sort="HotSort[1]" :call-fun="sortc.onDown.bind(sortc)"></Sort>
                </div>
                <div class="r-coll c-wave">
                    <span class="t-mr">{{ key }}
                        <!-- 波动率 -->
                        <!-- {{ volatility.nvas_.value.value }} -->
                        {{ $t('message.Volatility.dd') }}
                    </span>
                    <Sort :sort="HotSort[2]" :call-fun="sortc.onDown.bind(sortc)"></Sort>
                </div>
                <div class="r-coll c-total_ c-title-5">
                    <!-- 交易量 -->
                    <!-- {{ volatility.nvas_.value.value }} -->
                    {{ $t('message.Volatility.ee.a') }} /
                    <!-- {{ volatility.nvas_.value.value }} -->
                    {{ $t('message.Volatility.ee.b') }}
                </div>
                <div class="r-coll c-total">
                    <!-- 交易量 -->
                    <!-- {{ volatility.nvas_.value.value }} -->
                    {{ $t('message.Volatility.e') }}
                </div>
                <div class="r-coll c-account">
                    <span class="t-mr">
                        <!-- 成交额 -->
                        <!-- {{ volatility.nvas_.value.value }} -->
                        {{ $t('message.Volatility.f') }}
                    </span>
                    <Sort :sort="HotSort[3]" :call-fun="sortc.onDown.bind(sortc)"></Sort>
                </div>
                <!-- 操作 -->
                <!-- <div class="r-coll c-do">
                    {{ $t('message.Volatility.g') }}
                </div> -->
            </div>
            <div class="r-table r-body c-title-3" v-for="(item, i) in filterAry" :key="i">
                <div class="r-coll c-type">
                    <div class="r-num">{{ (curPage - 1) * pageSize + i + 1 }}</div>
                    <img class="rc-img" :src="tokens.getImg(item.s)" />
                    <!-- <div class="r-wd">{{ item.s }}</div> -->
                    <div class="r-wd" @click="onJump(item)">
                        {{ commFun.getForm(true, item.s, true) }}
                        <span style="color: var(--color);">/ {{ commFun.getForm(false, item.s, true) }}</span>
                    </div>
                </div>
                <div class="r-coll c-news">{{ item.p }}</div>
                <!-- <div class="r-coll c-wave c-color1">{{ item.volatility }}%</div> -->
                <div class="r-coll c-wave c-color1">
                    <JNumber :num="item.r" notbold is-color suffix="%" origin></JNumber>
                </div>
                <div class="r-coll c-wave c-color2">
                    <JNumber :num="item.V" notbold is-color suffix="%" origin></JNumber>
                </div>
                <div class="r-coll c-total_">
                    <JNumber :num="item.h" notbold :price="true"></JNumber>&nbsp;/&nbsp;<JNumber :num="item.L" notbold
                        :price="true"></JNumber>
                </div>
                <div class="r-coll c-total">{{ formatBigNumber(item.v) }}</div>
                <div class="r-coll c-account">{{ formatBigNumber(item.q) }}</div>
                <!-- <div class="r-coll c-do c-color">
                    {{ $t('message.Volatility.h') }}
                </div> -->
            </div>
            <Empty v-if="list.length === 0"></Empty>
        </div>
        <JPage class="my-4" :length="totalPage" :model-value="curPage" @update:modelValue="onPage" :total-visible="3">
        </JPage>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive } from "vue";
import { Sort as SortC, SortEnum } from "@/comm/sort";
import { formatBigNumber } from "@/comm/format";
import { useTokens } from "@/stores/tokens";
import { sortList } from "@/comm/tooler";
import { commFun } from '../script/comm';
import { useRank } from "@/stores/rank";
import { PAGE_SIZE } from "../base";
import { volatility } from '../script/comm';
import Sort from "@/components/j-sort/index.vue";
import JPage from "@/components/j-page/index.vue";
import Empty from "@/components/j-empty/index.vue";
import JNumber from '@/components/j-number/index.vue';
const tokens = useTokens();
const sorts = ref([
    {
        key: 0,
        val: SortEnum.NONE
    },
    {
        key: 1,
        val: SortEnum.NONE
    },
    {
        key: 2,
        val: SortEnum.NONE
    },
    {
        key: 3,
        val: SortEnum.NONE
    },
]);
const sortc = new SortC(sorts);
const HotSort = sortc.sort;

sortc.callFun = function (item) {
    console.log('yzt_点击了volatility', item);
    sort.name = 0;
    sort.add = 0;
    sort.turn = 0;
    sort.vol = 0;
    if (item.key == 0) {
        sort.name = item.val;
    }
    if (item.key == 1) {
        sort.add = item.val;
    }
    if (item.key == 2) {
        sort.turn = item.val;
    }
    if (item.key == 3) {
        sort.vol = item.val;
    }
}
setTimeout(()=>{
    sortc.callFun({ key: 2, val: 2 })
}, 300)


const rank = useRank();
const curPage = ref(1);
const pageSize = ref(PAGE_SIZE);

const totalPage = computed(() => {
    if (!rank.WAVE) return 0;
    return Math.ceil(rank.WAVE.length / pageSize.value);
});

defineProps(['key'])

const onPage = (v: number) => {
    curPage.value = v;
    console.log(v);
};

const onJump = (item: any) => {
    console.log(item);
    // localStorage.setItem("kline", item.s);
    location.href = "/coin/" + item.s;
};

const list = computed(() => {
    if (!rank.WAVE) return [];
    return rank.WAVE.slice((curPage.value - 1) * pageSize.value, curPage.value * pageSize.value);
});

const sort = reactive({
    name: 0,
    add: 0,
    turn: 0,
    vol: 1,
});
const filterAry = computed(() => {
    var ary = [...list.value];
    if (sort.name !== 0) {
        sortList(ary, "s", sort.name == 2);
    }
    if (sort.add !== 0) {
        sortList(ary, "r", sort.add == 2);
    }
    if (sort.turn !== 0) {
        sortList(ary, "V", sort.turn == 2);
    }
    if (sort.vol !== 0) {
        sortList(ary, "q", sort.vol == 2);
    }

    return ary;
});
</script>

<style lang="less" scoped>
@import url("../base.less");
</style>
